<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 60px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bbffaa;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            /**
                定位(position)
                    -定位是一种更加高级的布局手段
                    -通过定位可以将一个元素摆放到页面的任意位置
                        可选值:
                            static 默认值:元素是静止的没有开启定位
                            relative 开启元素的相对定位
                            absolute 开启元素绝对定位
                            fixed 开启元素的固定定位
                            sticky 开启元素的粘滞定位

                   -相对定位:
                        -当元素的position属性值设置为relative时开启了元素的相对定位
                        -特点:
                          1.元素开启相对定位以后,如果不设置偏移量元素不会发生任何变化
                          2.相对定位是参照与元素在文档流中的位置进行定位的
                          3.相对定位会提升元素的层级
                          4.相对定位不会使元素脱离文档流
                          5.相对定位不会改变元素的性质,快还是快,行内还是行内
                   -偏移量(offset)
                        -当元素开启了定位以后，可以通过偏移量来设置元素的位置
                            top
                                -定位元素和定位位置上边的距离
                            bottom
                                -定位元素和定位位置下班的距离
                            left
                            right
             */

            position: relative;
            left: 200px;
            top: -200px;
        }
        .box3{
              width: 200px;
              height: 200px;
              background-color: yellow;
          }

    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>